
<style type="text/css">
    @-moz-keyframes circles-loader {
        0% {
            -moz-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -moz-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @-webkit-keyframes circles-loader {
        0% {
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    @keyframes circles-loader {
        0% {
            -moz-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -moz-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

    .circles-loader {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        font-size: 28px;
        -moz-animation: circles-loader 1s infinite linear;
        -webkit-animation: circles-loader 1s infinite linear;
        animation: circles-loader 1s infinite linear;

    }

    .card {
        position: relative;
        text-align: center;
        vertical-align: middle;
        width: 60px;
        height: 60px;
        margin: 0 auto;
    }
</style>
<!--  动态弹窗统一配置  -->    
<div class="modal fade" id="commonModal">
</div>
<!--       END         -->
<!--  ALERT  --> 

<div class="modal fade" id="alertModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" id="alertModalBtn" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!--     ALERT   END        --> 

<!--  confirm CONFIRM  --> 

<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" id="confirmModalCancel" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="confirmModalBtn" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>

<!--  CONFIRM end --> 

<!-- LOADING -->
<div class="modal fade" id="loadModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="loading-title" style="text-align:center; font-size: 14px; font-weight: 700;"><p>内容加载中...请稍后...</p></div>

                <div class="card">
                    <span class="circles-loader glyphicon glyphicon-asterisk"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- LOADING END -->